
<!DOCTYPE html>
<html lang="en">
    <head><meta name="generator" content="Hexo 3.9.0">
    
        <title>FairyGUI - 适配</title>
    
        <meta charset="utf-8">
        <meta name="description" content="FairyGUI教程">
        <meta name="keywords" content="FairyGUI,FGUI,FairyGUI教程">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="-适配FairyGUI">
        <meta property="og:description" content="FairyGUI教程">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="适配 — FairyGUI">
        <meta name="twitter:description" content="FairyGUI教程">

      <!--  <link href='//fonts.proxy.ustclug.org/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->

        <!-- main page styles -->
        <link rel="stylesheet" href="/docs/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/docs/js/vue.min.js"></script>
        <script>window.PAGE_TYPE = "guide_editor"</script>
    </head>
    <body class="docs">        <div id="mobile-bar" data-bg-text="FairyGUI">
            <a class="menu-button"></a>
        </div>
        <div id="header">
  <ul id="nav">
    <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
    </ul>
    <div class="list">
        <ul class="menu-root">
            

	 			
	                
	                <li>
	                    <a href="/docs/guide/index.html" class="sidebar-link">导读</a>
	                </li>
	            
	
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/index.html" class="sidebar-link">编辑器使用基础</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/project_settings.html" class="sidebar-link">项目设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/package.html" class="sidebar-link">包</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/branch.html" class="sidebar-link">分支</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/publish.html" class="sidebar-link">发布</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/object.html" class="sidebar-link">元件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/image.html" class="sidebar-link">图片</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/movieclip.html" class="sidebar-link">动画</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/graph.html" class="sidebar-link">图形</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/loader.html" class="sidebar-link">装载器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/text.html" class="sidebar-link">文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/richtext.html" class="sidebar-link">富文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/group.html" class="sidebar-link">组</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/component.html" class="sidebar-link">组件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollpane.html" class="sidebar-link">滚动容器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/controller.html" class="sidebar-link">控制器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/relation.html" class="sidebar-link">关联系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/label.html" class="sidebar-link">标签</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/button.html" class="sidebar-link">按钮</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/combobox.html" class="sidebar-link">下拉框</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/progressbar.html" class="sidebar-link">进度条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/slider.html" class="sidebar-link">滑动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollbar.html" class="sidebar-link">滚动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/list.html" class="sidebar-link">列表</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/tree.html" class="sidebar-link">树</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/popup.html" class="sidebar-link">Popup</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/dragdrop.html" class="sidebar-link">Drag&Drop</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/window.html" class="sidebar-link">窗口系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/transition.html" class="sidebar-link">动效</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/adaptation.html" class="sidebar-link current">适配</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/i18n.html" class="sidebar-link">多国语言</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/export.html" class="sidebar-link">导入和导出</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/preference.html" class="sidebar-link">偏好设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/plugin.html" class="sidebar-link">插件</a>
	                </li>
	            
	
	            
	                
	                
	                <li><h3>SDK</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/sdk/laya.html" class="sidebar-link">LayaAir</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/egret.html" class="sidebar-link">Egret</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cocos2dx.html" class="sidebar-link">Cocos2dx</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/creator.html" class="sidebar-link">Cocos Creator</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cryengine.html" class="sidebar-link">Cry Engine</a>
	                </li>
	            

	            
	                
	                
	                <li><h3>SDK - Unity</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/unity/index.html" class="sidebar-link">显示UI面板</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/transform.html" class="sidebar-link">坐标系统</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/atlas.html" class="sidebar-link">纹理集的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/font.html" class="sidebar-link">字体的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/input.html" class="sidebar-link">输入处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/event.html" class="sidebar-link">事件机制</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/insert3d.html" class="sidebar-link">插入模型/粒子/Spine/Canvas</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/uipainter.html" class="sidebar-link">曲面UI</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/drawcall.html" class="sidebar-link">DrawCall优化</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/lua.html" class="sidebar-link">在Lua中使用</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/special.html" class="sidebar-link">特色功能</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/faq.html" class="sidebar-link">常见问题</a>
	                </li>
	            

            
        </ul>
    </div>
</div>


<div class="content guide_editor with-sidebar ">
    
      <h1>适配</h1>
    
    <p>FairyGUI为手游开发提供了自动适应各种设备分辨率的UI适配策略，这意味着开发者只需要制作一套UI，就可以适配所有分辨率的设备。</p>
<h2 id="设计分辨率与设备分辨率"><a href="#设计分辨率与设备分辨率" class="headerlink" title="设计分辨率与设备分辨率"></a>设计分辨率与设备分辨率</h2><p>通常我们会选择一个固定的分辨率进行UI设计和制作，这个分辨率称为设计分辨率。例如1136×640,1280×720都是比较常用的设计分辨率。选定一个设计分辨率后，最大的UI界面（通常就是全屏界面）的大小就限制在这个分辨率。<br>运行时设备的分辨率称为设备分辨率，这个分辨率与设计分辨率不一定一致，需要将UI界面经过一定缩放投射到屏幕上。</p>
<h2 id="全局缩放"><a href="#全局缩放" class="headerlink" title="全局缩放"></a>全局缩放</h2><p>当设计分辨率和设备分辨率不一致时，首先进行的是全局缩放。这个全局缩放对UI内部是透明的，也就是说，所有UI界面都不需要理会这个缩放的存在。例如如果整体放大两倍，一个窗口的大小为400×400像素，那么最终显示到屏幕的窗口大小将为800×800像素，但如果你读取这个窗口的width和height，仍然将返回400×400，内部的所有坐标也不会发生变化。</p>
<p>Egret/Laya/Cocos2dx/CocosCreator不使用FairyGUI提供的全局缩放，需要使用他们自带的全局缩放策略，参考资料：</p>
<ul>
<li><a href="http://developer.egret.com/cn/2d/screenAdaptation/explanation" target="_blank" rel="noopener">Egret</a> </li>
<li><a href="https://ldc.layabox.com/doc/?nav=zh-as-1-8-0" target="_blank" rel="noopener">LayaAir</a></li>
<li><a href="https://docs.cocos.com/creator/manual/zh/ui/multi-resolution.html" target="_blank" rel="noopener">CocosCreator</a></li>
</ul>
<p>其他平台设置全局缩放的方式是：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">GRoot.inst.SetContentScaleFactor(<span class="number">1136</span>，<span class="number">640</span>，ScreenMatchMode.MatchWidthOrHeight);</span><br></pre></td></tr></table></figure>
<p>这里1136和640是设计分辨率的宽度和高度。ScreenMatchMode定义了适配模式，可用的常量有：</p>
<ul>
<li><p><code>MatchWidthOrHeight</code> 取宽和高比例较小的进行缩放。例如，设计分辨率是960x640，设备分辨率是1280×720，那么可以得到宽边的比例是1280/960=1.33，高边的比例是720/640=1.125，最后取较小的1.125作为全局缩放系数。这种缩放方式保证内容缩放后始终在屏幕内，可能会留边，但不会超出屏幕看不到。</p>
</li>
<li><p><code>MatchWidth</code> 固定取宽的比例进行缩放。高边可能会超出屏幕。</p>
</li>
<li><p><code>MatchHeight</code> 固定取高的比例进行缩放。宽边可能会超出屏幕。</p>
</li>
</ul>
<p>在Unity版本里，除了使用API设置全局缩放外，还提供了一个Unity组件：UIContentScaler。在启动场景里任何一个GameObject挂上UIContentScaler组件即可。并不需要每个场景都挂。参考<a href="#../unity/index.html#UIContentScaler">这里</a>。</p>
<h2 id="逻辑屏幕"><a href="#逻辑屏幕" class="headerlink" title="逻辑屏幕"></a>逻辑屏幕</h2><p>全局缩放后的屏幕大小就是逻辑屏幕大小，在上例中，设备分辨率是1280×720，全局缩放系数是1.125，那么逻辑屏幕大小就是（1280/1.125=1138, 720/1.125=640）= 1138x640。GRoot这个UI根组件的大小始终占满逻辑屏幕，也就是说，逻辑屏幕的大小可以通过GRoot.inst.width和GRoot.inst.height获得。</p>
<h2 id="全屏界面适配"><a href="#全屏界面适配" class="headerlink" title="全屏界面适配"></a>全屏界面适配</h2><p>全局缩放后，大部分UI都不需要做任何调整，只有一个例外，就是设计为全屏的界面。在上例中，在设计分辨率下，全屏界面的大小是960x640，我们也是按这个大小设计全屏组件的。全局缩放后，这时逻辑屏幕的大小变成1138x640了，那大小就不一致了。这时我们需要重新调整组件大小使之满屏。</p>
<p>如果你使用的是UIPanel，那么在Inspector上设置Fit Screen为Fit Size就可以了；如果是动态创建的UI，那么可以使用API：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//设置组件全屏，即大小和逻辑屏幕大小一致。</span></span><br><span class="line"><span class="comment">//组件的内部应该做好关联处理， 以应对大小改变。</span></span><br><span class="line">aComponent.SetSize(GRoot.inst.width, GRoot.inst.height);</span><br><span class="line"></span><br><span class="line"><span class="comment">//或者更简洁的方式</span></span><br><span class="line">aComponnet.MakeFullScreen();</span><br></pre></td></tr></table></figure>
<p>一般来说，手游在进入游戏后，屏幕大小就不会变化的。但如果你开发的是桌面游戏，又或者支持横竖屏切换的游戏，即屏幕大小是会变化的，那么全屏界面还需要加上对屏幕大小的约束，即</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aComponent.AddRelation(GRoot.inst, RelationType.Size);</span><br></pre></td></tr></table></figure>
<p>当然，这仅仅是处理全屏界面的一种方式。在有的情况下，例如如果选用“MatchHeight”模式，也就是高度优先的适配方法，这种方法保证了UI界面垂直方向的内容总是铺满，而水平方向就有可能超出屏幕。这种适配方式需要设计师有“安全区域”的设计思维，不能安排内容在超出屏幕的部分。例如，将全屏界面居中，牺牲掉两边的内容：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aComponent.x = (GRoot.inst.width – aComponent.width)/<span class="number">2</span>;</span><br></pre></td></tr></table></figure>
<p>这样，左边缘和右边缘将会被屏幕边缘裁剪掉，这要求设计师在设计时就考虑到这种情况。</p>
<h2 id="自动调整UI布局"><a href="#自动调整UI布局" class="headerlink" title="自动调整UI布局"></a>自动调整UI布局</h2><p>全屏组件在适配过程中需要重新设置全屏，那么组件大小就会发生变化，这时需要使用关联系统让组件内的元素自动布局在正确的位置。实例可以参考<a href="relation.html#实例解析">关联系统</a>。</p>

    
    <div class="footer">
      发现错误或想贡献文档?
      <a href="https://github.com/fairygui/fairygui.github.io/tree/master/src/guide/editor/adaptation.md" target="_blank">
        在 Github 上编辑此文档!
      </a>
    </div>
</div>

                
            </div>
            <script src="/docs/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->        
        <script src="/docs/js/css.escape.js"></script>
        <script src="/docs/js/common.js"></script>
    </body>
</html>
